Bootstrap Snippet color changer using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body style="padding: 20px">
  <label>Choose a footer color:
  <input type="color" value="#ff4545">
  <footer></footer>
    
</body>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
:root {
  --footer-color: #ff4545;
}
footer {
  width: 100%;
  height: 50px;
  margin-top: 20px;
  background-color: var(--footer-color)
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
var input = document.querySelector('input')
var footer = document.querySelector('footer')
input.addEventListener('change', function(){
  footer.style.setProperty('--footer-color', input.value)
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"color changer "
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"color changer " Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"color changer "
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY